import { Card } from "antd";
import "../../../common/common.css";

export const PanelFunctionData = [
    {
        key: "1",
        label: "延时触发函数",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="after" className="lodashCard">
                    <p>
                        _.after(n, func) <br />
                        <b>【 执行n次func后触发函数 】</b>
                    </p>
                    <p>_.before的反向函数;此方法创建一个函数，当他被调用n或更多次之后将马上触发func 。</p>
                    <p>返回function</p>
                </Card>
                <Card title="defer" className="lodashCard">
                    <p>
                        _.defer(func, [args]) <br />
                        <b>【 推迟调用func，直到当前堆栈清理完毕 】</b>
                    </p>
                    <p>推迟调用func，直到当前堆栈清理完毕。 调用时，任何附加的参数会传给func。</p>
                    <p>返回计时器id（number）</p>
                </Card>
                <Card title="delay" className="lodashCard">
                    <p>
                        _.delay(func, wait, [args]) <br />
                        <b>【 延迟一段时间调用函数 】</b>
                    </p>
                    <p>延迟 wait 毫秒后调用 func。 调用时，任何附加的参数会传给func。</p>
                    <p>返回计时器id（number）</p>
                </Card>
            </div>
        ),
    },
    {
        key: "2",
        label: "限制传参数量",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="ary" className="lodashCard">
                    <p>
                        _.ary(func, [n=func.length]) <br />
                        <b>【 限制传参数量 】</b>
                    </p>
                    <p> 创建一个调用func的函数。调用func时最多接受 n个参数，忽略多出的参数。</p>
                    <p>返回function</p>
                </Card>
                <Card title="unary" className="lodashCard">
                    <p>
                        _.unary(func) <br />
                        <b>【 限制参数数量为1 】</b>
                    </p>
                    <p>创建一个最多接受一个参数的函数，忽略多余的参数。</p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "3",
        label: "限制函数执行次数",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="before" className="lodashCard">
                    <p>
                        _.before(n, func) <br />
                        <b>【 限制函数执行次数，超过次数时返回最后一次执行结果 】</b>
                    </p>
                    <p>创建一个调用func的函数，通过this绑定和创建函数的参数调用func，调用次数不超过 n 次。 之后再调用这个函数，将返回一次最后调用func的结果。</p>
                    <p>返回function</p>
                </Card>
                <Card title="once" className="lodashCard">
                    <p>
                        _.once(func) <br />
                        <b>【 限制函数只能执行一次 】</b>
                    </p>
                    <p>创建一个只能调用 func 一次的函数。 重复调用返回第一次调用的结果。 func 调用时， this 绑定到创建的函数，并传入对应参数。</p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "4",
        label: "this绑定",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="bind" className="lodashCard">
                    <p>
                        _.bind(func, thisArg, [partials]) <br />
                        <b>【 绑定this到指定函数上 】</b>
                    </p>
                    <p>
                        创建一个调用func的函数，thisArg绑定func函数中的 this (注：this的上下文为thisArg) ，并且func函数会接收partials附加参数。 _.bind.placeholder值，默认是以 _ 作为附加部分参数的占位符。 注意: 不同于原生的
                        Function#bind，这个方法不会设置绑定函数的 "length" 属性。
                    </p>
                    <p>返回function</p>
                </Card>
                <Card title="rest" className="lodashCard">
                    <p>
                        _.rest(func, [start=func.length-1]) <br />
                        <b>【 this指针绑定 】</b>
                    </p>
                    <p>创建一个函数，调用func时，this绑定到创建的新函数，并且start之后的参数作为数组传入。 Note: 这个方法基于rest parameter[https://mdn.io/rest_parameters]。</p>
                    <p>返回function</p>
                </Card>
                <Card title="spread" className="lodashCard">
                    <p>
                        _.spread(func, [start=0]) <br />
                        <b>【 this指针绑定 】</b>
                    </p>
                    <p>创建一个函数，调用func时，this绑定到创建的新函数，把参数作为数组传入，类似于Function#apply.</p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "5",
        label: "函数柯里化",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="curry" className="lodashCard">
                    <p>
                        _.curry(func, [arity=func.length]) <br />
                        <b>【 函数柯里化（将多入参函数变成单入参函数，最主要的场景就是减少不必要的固定入参） 】</b>
                    </p>
                    <p>
                        创建一个函数，该函数接收 func 的参数，要么调用func返回的结果，如果 func 所需参数已经提供，则直接返回 func 所执行的结果。或返回一个函数，接受余下的func 参数的函数，可以使用 func.length 强制需要累积的参数个数。
                        _.curry.placeholder值，默认是以 _ 作为附加部分参数的占位符。 Note: 这个方法不会设置 curried 函数的 "length" 属性。
                    </p>
                    <p>返回function</p>
                </Card>
                <Card title="curryRight" className="lodashCard">
                    <p>
                        _.curryRight(func, [arity=func.length]) <br />
                        <b>【 类似curry，执行顺序从右开始 】</b>
                    </p>
                    <p>这个方法类似_.curry。 除了它接受参数的方式用_.partialRight 代替了_.partial。 _.curryRight.placeholder值，默认是以 _ 作为附加部分参数的占位符。 Note: 这个方法不会设置 curried 函数的 "length" 属性。</p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "6",
        label: "性能优化（防抖与节流）",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="debounce">
                    <p>
                        _.debounce(func, [wait=0], [options=]) <br />
                        <b>【 防抖 】</b>
                    </p>
                    <p>
                        {" "}
                        创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options（选项）
                        对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（注：是 先调用后等待 还是 先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的
                        debounced（防抖动）函数返回是最后一次 func 调用的结果。 注意: 如果 leading 和 trailing 选项为 true, 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用防抖方法。 如果 wait 为 0 并且 leading 为 false,
                        func调用将被推迟到下一个点，类似setTimeout为0的超时。 SeeDavid Corbacho's articlefor details over the differences between_.debounce and_.throttle.
                    </p>
                    <p>返回function</p>
                </Card>
                <Card title="throttle">
                    <p>
                        _.throttle(func, [wait=0], [options=]) <br />
                        <b>【 节流 】</b>
                    </p>
                    <p>
                        创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing
                        决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。 注意: 如果 leading 和 trailing 都设定为 true 则 func 允许 trailing 方式调用的条件为: 在 wait
                        期间多次调用。 如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点，类似setTimeout为0的超时。 查看David Corbacho's article【https://css-tricks.com/debouncing-throttling-explained-examples/】
                        了解_.throttle【https://www.lodashjs.com/docs/lodash.throttle#throttle】 与_.debounce【https://www.lodashjs.com/docs/lodash.throttle#debounce】 的区别。
                    </p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "7",
        label: "传参处理",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="flip" className="lodashCard">
                    <p>
                        _.flip(func) <br />
                        <b>【 反转传参 】</b>
                    </p>
                    <p> 创建一个函数，调用func时候接收翻转的参数。</p>
                    <p>返回function</p>
                </Card>
                <Card title="partial" className="lodashCard">
                    <p>
                        _.partial(func, [partials]) <br />
                        <b>【 传参添加前缀或者后缀 】</b>
                    </p>
                    <p>
                        创建一个函数。 该函数调用 func，并传入预设的 partials 参数。 这个方法类似_.bind，除了它不会绑定 this。 这个 _.partial.placeholder 的值，默认是以 _ 作为附加部分参数的占位符。 注意: 这个方法不会设置 "length" 到函数上。
                    </p>
                    <p>返回function</p>
                </Card>
                <Card title="partialRight" className="lodashCard">
                    <p>
                        _.partialRight(func, [partials]) <br />
                        <b>【 传参添加前缀或者后缀 】</b>
                    </p>
                    <p>这个函数类似_.partial，除了预设参数被附加到接受参数的后面。 这个 _.partialRight.placeholder 的值，默认是以 _ 作为附加部分参数的占位符。 注意: 这个方法不会设置 "length" 到函数上。</p>
                    <p>返回function</p>
                </Card>
                <Card title="rearg" className="lodashCard">
                    <p>
                        _.rearg(func, indexes) <br />
                        <b>【 修改参数参数位置 】</b>
                    </p>
                    <p>创建一个函数,调用func时，根据指定的 indexes 调整对应位置参数。其中第一个索引值是对应第一个参数，第二个索引值是作为第二个参数，依此类推。</p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "8",
        label: "函数缓存",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="memoize">
                    <p>
                        _.memoize(func, [resolver]) <br />
                        <b>【 缓存函数执行结果，源对象改变也不会影响 】</b>
                    </p>
                    <p>
                        创建一个会缓存 func 结果的函数。 如果提供了 resolver ，就用 resolver 的返回值作为 key 缓存函数的结果。 默认情况下用第一个参数作为缓存的 key。 func 在调用时 this 会绑定在缓存函数上。 注意: 缓存会暴露在缓存函数的 cache
                        上。 它是可以定制的，只要替换了 _.memoize.Cache 构造函数，或实现了Map 的 delete, get, has, 和 set方法。
                    </p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "9",
        label: "函数结果取反",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="negate">
                    <p>
                        _.negate(predicate) <br />
                        <b>【 创建一个针对断言函数 func 结果取反的函数 】</b>
                    </p>
                    <p>创建一个针对断言函数 func 结果取反的函数。 func 断言函数被调用的时候，this 绑定到创建的函数，并传入对应参数。</p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "10",
        label: "可以用于对不同参数执行不同函数",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="overArgs" className="lodashCard">
                    <p>
                        _.overArgs(func, [transforms=[_.identity]]) <br />
                        <b>【 可以用于对不同参数执行不同函数 】</b>
                    </p>
                    <p>创建一个函数，调用func时参数为相对应的transforms的返回值。</p>
                    <p>返回function</p>
                </Card>
            </div>
        ),
    },
    {
        key: "11",
        label: "返回空数组",
        children: (
            <div className="centerTextLeft lodashPanel lodashWidth">
                <Card title="stubArray" className="lodashCard">
                    <p>
                        _.stubArray() <br />
                        <b>【 这个方法返回一个新的空数组 】</b>
                    </p>
                    <p>这个方法返回一个新的空数组。</p>
                    <p>返回array</p>
                </Card>
            </div>
        ),
    },
];